<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
     <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
       <script type="text/javascript" src="./lib/echarts-all-3.js"></script>
     <script src='./lib/mapbox-gl-dev.js'></script>
    <link href='./lib/mapbox-gl.css' rel='stylesheet' />
     <script type="text/javascript" src="../dist/EchartsLayer.js"></script>
    <script type="text/javascript">
        $.get('./data/weibo.json', function (weiboData) {


            weiboData = weiboData.map(function (serieData, idx) {
                var px = serieData[0] / 1000;
                var py = serieData[1] / 1000;
                var res = [
                    [px, py]
                ];

                for (var i = 2; i < serieData.length; i += 2) {
                    var dx = serieData[i] / 1000;
                    var dy = serieData[i + 1] / 1000;
                    var x = px + dx;
                    var y = py + dy;
                    res.push([x.toFixed(2), y.toFixed(2), 1]);

                    px = x;
                    py = y;
                }
                return res;
            });

            var map = new mapboxgl.Map({
                container: 'container', // container id
                style: {
                    'version': 8,

                    'sources': {},
                    'layers': []
                },
                center: [112, 37.94], // starting position
                // hash: true,
                // interactive:false,
                // pitch: 45,
                zoom: 2 // starting zoom
            })
            map.addControl(new mapboxgl.NavigationControl())
          
            map.on('load', function () {
                map.addSource('google.tile', {
                    'type': 'raster',
                    'tiles': ['https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}'],
                    'tileSize': 256
                })
                map.addLayer({
                    'id': 'google',
                    'type': 'raster',
                    'source': 'google.tile'
                })

                var echartslayer=new EchartsLayer(map);
                echartslayer.chart.setOption(option = {

                    GLMap: {
                        roam: true
                    },
                    coordinateSystem: 'GLMap',
                    title: {
                        text: '微博签到数据点亮中国',
                        subtext: 'From ThinkGIS',
                        sublink: 'http://www.thinkgis.cn/public/sina',
                        left: 'center',
                        top: 'top',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    tooltip: {},
                    legend: {
                        left: 'left',
                        data: ['强', '中', '弱'],
                        textStyle: {
                            color: '#ccc'
                        }
                    },
                    geo: {
                        name: '强',
                        type: 'scatter',
                        map: 'GLMap',
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#323c48',
                                borderColor: '#111'
                            },
                            emphasis: {
                                areaColor: '#2a333d'
                            }
                        }
                    },
                    series: [{
                        name: '弱',
                        type: 'scatter',
                        coordinateSystem: 'GLMap',
                        symbolSize: 1,
                        large: true,
                        itemStyle: {
                            normal: {
                                shadowBlur: 2,
                                shadowColor: 'rgba(37, 140, 249, 0.8)',
                                color: 'rgba(37, 140, 249, 0.8)'
                            }
                        },
                        data: weiboData[0]
                    }, {
                        name: '中',
                        type: 'scatter',
                        coordinateSystem: 'GLMap',
                        symbolSize: 1,
                        large: true,
                        itemStyle: {
                            normal: {
                                shadowBlur: 2,
                                shadowColor: 'rgba(14, 241, 242, 0.8)',
                                color: 'rgba(14, 241, 242, 0.8)'
                            }
                        },
                        data: weiboData[1]
                    }, {
                        name: '强',
                        type: 'scatter',
                        coordinateSystem: 'GLMap',
                        symbolSize: 1,
                        large: true,
                        itemStyle: {
                            normal: {
                                shadowBlur: 2,
                                shadowColor: 'rgba(255, 255, 255, 0.8)',
                                color: 'rgba(255, 255, 255, 0.8)'
                            }
                        },
                        data: weiboData[2]
                    }]
                });


            })


        });
    </script>
</body>

</html>